<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>交易室 - {{ room_name }}</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/file.css' %}">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .chat-container {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        #chat-log {
            height: 400px;
            overflow-y: scroll;
            border: 1px solid #dee2e6;
            padding: 10px;
            border-radius: 5px;
            background-color: #ffffff;
        }
        #chat-message-input {
            width: calc(100% - 100px);
            margin-right: 10px;
        }
        #notification {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #f0ad4e;
            color: white;
            padding: 10px;
            border-radius: 5px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="nav_head">
        {% if request.session.username|default:'' != '' %}
            <p>欢迎您，{{ request.session.username }}</p>
            <button class="btn btn-default"><a href="/user/logout">退出</a></button>
        {% else %}
            <a class="btn btn-link" href="/user/login">登陆</a>
            <a class="btn btn-link" href="/user/register">注册</a>
            <a class="btn btn-link" href="/admin">一级管理员登录</a>
            <a class="btn btn-link" href="/user/admin_logon">二级管理员登录</a>
        {% endif %}
        <div class="nav dropdown">
            <a class="btn btn-link" href="/user/user_center">| 用户中心</a>
        </div>
        <div class="nav">
            <a class="btn btn-link" href="/">首页</a>
        </div>
    </div>

    <main class="container mt-4">
        <div class="chat-container">
            <h2 class="text-center">交易室 - {{ room_name }}</h2>
            <div id="chat-room">
                <div id="chat-log"></div>
                <div class="input-group mt-3">
                    <input id="chat-message-input" type="text" class="form-control" placeholder="输入消息...">
                    <div class="input-group-append">
                        <button id="chat-message-submit" class="btn btn-primary">发送</button>
                    </div>
                </div>
                {{ room_name|json_script:"room-name" }}
            </div>
        </div>
    </main>

    <!-- <div class="foot mt-4">
        <p>来校园二手货，你的闲置能换钱！</p>
        <span>全国最大最活跃的校园闲置物品交换平台</span>
    </div> -->

    <div id="notification">新消息</div>

    <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script>
        const roomName = JSON.parse(document.getElementById('room-name').textContent);

        const chatSocket = new WebSocket(
            'ws://'
            + window.location.host
            + '/ws/chat/'
            + roomName
            + '/'
        );

        chatSocket.onopen = function(e) {
            console.log('WebSocket connection established');
        };

        chatSocket.onclose = function(e) {
            console.error('Chat socket closed unexpectedly');
        };

        chatSocket.onmessage = function(e) {
            const data = JSON.parse(e.data);
            const chatLog = document.querySelector('#chat-log');
            const messageElement = document.createElement('div');
            messageElement.innerHTML = `
                <div class="message">
                    <a href="/user/profile/${data.user_id}/" class="username">${data.username}</a>: ${data.message}
                </div>
            `;
            chatLog.appendChild(messageElement);
            chatLog.scrollTop = chatLog.scrollHeight;

            // 显示新消息提示
            const notification = document.getElementById('notification');
            notification.innerHTML = `新消息: ${data.message} <a href="/chat/room/${roomName}/">进入房间</a>`;
            notification.style.display = 'block';
            setTimeout(() => {
                notification.style.display = 'none';
            }, 3000);
        };

        document.querySelector('#chat-message-input').focus();
        document.querySelector('#chat-message-input').onkeyup = function(e) {
            if (e.keyCode === 13) {  // enter, return
                document.querySelector('#chat-message-submit').click();
            }
        };

        document.querySelector('#chat-message-submit').onclick = function(e) {
            const messageInputDom = document.querySelector('#chat-message-input');
            const message = messageInputDom.value;
            chatSocket.send(JSON.stringify({
                'message': message
            }));
            messageInputDom.value = '';
        };
    </script>
</body>
</html>